import { Form, Input, Select, Card, Image, Cascader, Upload } from 'myselfantd';
import React, { Children, useEffect, useState } from 'react';
import styles from './index.module.scss';
import { Row, Col } from 'antd';
// import { getChilds, getBrandList } from '../api';
interface FormProps {
  data?: any;
  onFinish?: Function;
  handleFinish?: Function;
  viewmode?: 'view' | 'add' | 'edit';
  close: (...params: any) => void;
}
const App: React.FC<FormProps> = ({
  viewmode = 'add',
  data,
  onFinish: handleFinish,
  close,
  children,
}) => {
  const onGenderChange = (value: string) => {};
  const handleUploadOnChange = (val: any) => {
    console.log(val, '0000000');
  };
  return (
    <Card border={0}>
      <Row>
        <h2 style={{ fontSize: '20px', fontWeight: 'bold', marginBottom: '20px' }}>基础信息</h2>
      </Row>
      {/* <Row gutter={16}>
        <Col span={18}> */}
      <Form.Layout
        data={data}
        viewmode={viewmode}
        className={styles.drawer}
        formItemData={[
          [
            {
              name: 'name',
              label: '品类名称',
              rules: [{ required: true, message: '请输入品类名称' }],
              render: () => <Input placeholder="请输入" />,
            },
            {
              name: viewmode === 'add' ? 'categoryId' : 'categoryPath',
              label: '父类品类',
              rules: [{ required: true, message: '请选择父类分类' }],
              render: () => (
                <Cascader
                  disabled={viewmode === 'add' ? false : true}
                  request={async () => {
                    // let { result } = await getChilds({});
                    // result = result.map((item: any) => ({ ...item, isLeaf: false }));
                    // return result;
                    return []
                  }}
                  changeOnSelect
                  loadData={async (selectedOptions) => {
                    // const targetOption = selectedOptions[selectedOptions.length - 1];
                    // let { result } = await getChilds({ id: targetOption.id });
                    // return result;
                    return []
                  }}
                  fieldNames={{ label: 'name', value: 'id' }}
                  placeholder="请选择"
                />
              ),
            },
          ],
          [
            {
              name: 'brandName',
              label: '品类品牌',
              rules: [{ required: true, message: '请选择品类品牌' }],
              render: () => (
                <Select
                  fieldNames={{ name: 'name', value: 'id' }}
                  request={async () => {
                    // let { result } = await getBrandList();
                    // return result;
                    return []
                  }}
                  placeholder="请选择"
                  onChange={onGenderChange}
                  allowClear
                />
              ),
            },
            {
              name: 'brandId',
              label: '品类型号',
              rules: [{ required: true, message: '请输入品类型号' }],
              render: () => <Input placeholder="请输入品类型号" />,
            },
          ],
          [
            {
              name: 'producer',
              label: '生产厂家',
              render: () => <Input.TextArea placeholder="请输入生产厂家名称" />,
            },
            {
              name: 'note',
              label: '品类说明',
              render: () => <Input.TextArea placeholder="请输入品类说明" />,
            },
          ],
          [
            {
              name: 'image',
              label: '设备图片',
              render: () => (
                <Upload
                  urlTemplate={`${'UPLOAD_IMG_URL_NEW'}/hxdfs/{0}`}
                  onChange={handleUploadOnChange}
                />
              ),
              viewRender: () => (
                <Image.Form
                  urlTemplate={`${'UPLOAD_IMG_URL_NEW'}/hxdfs/{0}`}
                  width={120}
                  height={120}
                />
              ),
            },
          ],
        ]}
        request={handleFinish}
        onFinish={() => close()}
      >
        {children}
      </Form.Layout>
      {/* </Col> */}
      {/* <Col span={6}>
          <Space size="middle">
            {viewmode === 'add' && (
              <Upload
                urlTemplate={`${UPLOAD_IMG_URL_NEW}/hxdfs/{0}`}
                onChange={handleUploadOnChange}
              />
            )}
            {viewmode === 'edit' && (
              <Upload
                urlTemplate={`${UPLOAD_IMG_URL_NEW}/hxdfs/{0}`}
                value={'1111'}
                onChange={handleUploadOnChange}
              />
            )}
            {viewmode === 'view' && <Image />}
          </Space>
        </Col> */}
      {/* </Row> */}
    </Card>
  );
};

export default App;
